import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { registerMicroApps, start } from "qiankun";
import { initGlobalState, MicroAppStateActions } from "qiankun";
import { BrowserRouter } from "react-router-dom";

const state = {
  nickname: "sean86",
};

// 初始化 state
const actions: MicroAppStateActions = initGlobalState(state);
// 在当前应用监听全局状态，有变更触发 callback，fireImmediately = true 立即触发 callback
actions.onGlobalStateChange((state, prev) => {
  // state: 变更后的状态; prev 变更前的状态
  console.log(state, prev);
});
// 按一级属性设置全局状态，微应用中只能修改已存在的一级属性
setTimeout(() => {
  actions.setGlobalState({ ...state, age: 19 });
}, 2000);
// 移除当前应用的状态监听，微应用 umount 时会默认调用
actions.offGlobalStateChange();

registerMicroApps([
  {
    name: "qiankun-react-app",
    entry: "//localhost:3011",
    container: "#reactApp",
    activeRule: "/reactApp",
    props: {
      nickname: "Sean86",
    },
  },
  {
    name: "qiankun-vue-app",
    entry: "//localhost:3012",
    container: "#vueApp",
    activeRule: "/vueApp",
    props: {
      nickname: "Sean86",
    },
  },
]);
start();
const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
